import { Component, createRef, type ReactNode, type RefObject } from "react";
import StorySwitch from "../storyswitch/StorySwitch";

export default class RefBase extends Component {
  // h3Ref: HTMLDivElement | null = null
  // storySwitchRef: StorySwitch | null = null
  h3Ref: RefObject<HTMLDivElement | null> = createRef()
  storySwitchRef: RefObject<StorySwitch | null> = createRef()
  render(): ReactNode {
    return (
      <>
        {/* <h3 ref={ (el) => { this.h3Ref = el } }>我的</h3> */}
        {/* <button onClick={ () => console.log(this.h3Ref?.innerHTML) }>按钮</button> */}
        {/* <StorySwitch ref={ (el) => { this.storySwitchRef = el } } /> */}
        {/* <button onClick={ () => {
          console.log(this.storySwitchRef?.state.activeIndex)
          this.storySwitchRef?.setState({ activeIndex: 1 })
        } }>点击</button> */}

        <h3 ref={ this.h3Ref }>我的</h3>
        <button onClick={ () => console.log(this.h3Ref.current?.innerHTML) }>按钮</button>
        <StorySwitch ref={ this.storySwitchRef } />
        <button onClick={ () => {
          // console.log(this.storySwitchRef.current?.state.activeIndex)
          // this.storySwitchRef.current?.setState({ activeIndex: 1 })
          this.storySwitchRef.current?.setState({ visible: !this.storySwitchRef.current.state.visible })
        } }>点击</button>
      </>
    )
  }
}



